

<template>
  <div class="allHeight">
    <Spin :spinning="loading">
      <div class="table_cont">
        <Table :columns="column" :data-source="dataSource" :pagination="false">
          <template #headerCell="{ column, record }">
              <template v-if="column.dataIndex == 'action'">
                <div style="text-align: center;">
                  操作
                </div>
              </template>
            </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'action'">
              <div style="display: flex;width: 100%;justify-content: space-evenly;">
                <Button type="primary" size="small" @click="doStart(record)">用车申请</Button>
                <!-- <Button type="primary" size="small" @click="doHisRecord(record)">历史维修</Button> -->
              </div>
            </template>
          </template>
        </Table>
    </div>
    <div>
      <div class="controls"> 
        <ul>
          <div>-演示内容.</div>
          <li>1、本文件演示从一个实体台账上发起流程，并把Url携带参数传入到表单中.</li>
          <li>2、启动的流程</li>
          <div>- 车辆台账:</div>
          <li>1、流程启动: 只传入流程编号即可启动.  FlowNo=071</li>
          <li>2、申请维修流程时，通过Url携带参数方式就可以把车辆的一些信息传入到开始节点表单.</li>
        </ul>
        <!-- <Button type="primary" size="small" class="car_btn" @click="doFlowSearch">历史维修数据</Button> -->
      </div>
    </div>
  </Spin>
  </div>
</template>
<script lang="ts" setup>
import Dev2UrlInterface from '@/Toolkit/Dev2UrlInterface';
import { Table, Spin, Button } from 'ant-design-vue';
import type { ColumnType } from 'ant-design-vue/lib/table';
import { ref } from 'vue';

const loading = ref(false);
const column: ColumnType[] = [
{
    title: '车辆编号',
    dataIndex: 'PrjNo',
    fixed: 'left',
    width: 100,
    ellipsis: true,
  },
  {
    title: '车辆名称',
    dataIndex: 'PrjName',
    fixed: 'left',
    width: 200,
    ellipsis: true,
  },
  {
    title: '用车原因',
    dataIndex: 'YongCheYuanYin',
    fixed: 'left',
    width: 250,
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    width: 200,
  }
];

const dataSource = [
      {
          PrjNo:'100001',
          PrjName:'别克',
          YongCheYuanYin: '接送客户',
      },
      {
          PrjNo:'100002',
          PrjName:'吉利',
          YongCheYuanYin: '出差',
      },
   ];
/**
 * 申请:跳转流程页面
 * @param res 行数据
 */
const doStart = async (res:string) =>{
  const queryParams = new URLSearchParams(res).toString();
  // 072 车辆维修
  const url = await Dev2UrlInterface.Flow_MyFlowByFlowNo( '071', `&${queryParams}`);
  window.open(url);
}

/**
 * 历史维修：跳转到流程二开页面，通过PrjNo，PrjName区分
 * @param res 行数据
 */
const doHisRecord = async(res: any) => {
  console.log('res', res)
  // 071 车辆台账
  const url = await Dev2UrlInterface.Flow_Search( '071');
  window.open(url);
}

 /**
 * 打开流程二开页面
 * 
 */
 const doFlowSearch = async() => {
  // 071 车辆台账
  const url = await Dev2UrlInterface.Flow_Search( '071');
  window.open(url);
}

</script>
<style lang="less" scoped>
.ant-spin-nested-loading {
  max-height: 100%;

  .ant-spin-container {
    max-height: 100%;
  }
}


.allHeight {
  padding-top: 15px;
  height: 100%;
  background-color: #eeeeee;
}

.total {
  height: 40px;
  margin-top: 20px;
}

.btn_Back {
  float: right;
}

li{
  padding-top: 10px;
}
.controls{
  height: 55%;
  padding: 15px;
  margin: 0 15px;
  box-shadow: 1px 0px 5px 5px #eae4e4;
  background-color: #fff;
    .car_btn{
        margin-left: 10%;
      }
}
.table_cont{
  padding: 15px;
}
</style>

